@charset "UTF-8";
/* CSS Document */

#banner_3boxes{
  position: relative;
  bottom:0;
  padding: 0px 10px;
  z-index: 9999998;
}
#banner_3boxes .wrapper1440{
  max-width: 900px !important;
}
#banner_3boxes .col-1-3{position: relative;padding: 10px;}
#banner_3boxes .col-1-3 .col-1-1.banner_box_container{
  position: relative;
  padding: 10px;
  border: 1px solid #ffffff;
  border-radius: 10px;
}
#banner_3boxes .col-1-3 .col-1-1.banner_box_container i{
  position: absolute;
  top: 7px;
  left: 15px;
  font-size: 30px;
}
#banner_3boxes .col-1-3 .col-1-1.banner_box_container .banner_box_text{
  padding-left: 45px;
}
#banner_3boxes .col-1-3 .col-1-1.banner_box_container .banner_box_text h4,
#banner_3boxes .col-1-3 .col-1-1.banner_box_container .banner_box_text p{
  color: white;
  font-size: 1.5em;
}

#banner_toggle_box{
  position: relative;
}
#banner_toggle_icon{
  position: absolute;
  width: 50px;
  top: -31px;
  right: 0px;
  padding-top: 10px;
  z-index: 99999;
  background-color: #e53138;
  background-color: rgba(229,49,56,0.9);
  border-radius: 25px 25px 0px 0px;
  cursor: pointer; 
}
#banner_toggle_icon p{
  position: relative;
  padding: 20px auto;
  text-align: center;
}

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  #banner_toggle_icon{
    top: -29px;
  }
}
 
@media all and (max-width: 1440px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1440px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1440px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1440px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1440px), only screen and (min-resolution: 192dpi) and (max-width: 1440px), only screen and (min-resolution: 2dppx) and (max-width: 1440px) {

}

@media all and (max-width: 1280px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1280px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1280px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1280px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1280px), only screen and (min-resolution: 192dpi) and (max-width: 1280px), only screen and (min-resolution: 2dppx) and (max-width: 1280px) {
  #banner_3boxes .col-1-3 .col-1-1.banner_box_container .banner_box_text h4,
  #banner_3boxes .col-1-3 .col-1-1.banner_box_container .banner_box_text p{
    color: white;
    font-size: 1.4em;
  }

}

@media all and (max-width: 1180px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1180px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1180px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1180px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1180px), only screen and (min-resolution: 192dpi) and (max-width: 1180px), only screen and (min-resolution: 2dppx) and (max-width: 1180px) {

}
/*TOUCH PANEL*/
@media all and (max-width: 1080px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1080px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1080px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1080px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1080px), only screen and (min-resolution: 192dpi) and (max-width: 1080px), only screen and (min-resolution: 2dppx) and (max-width: 1080px) {

}
/*END TOUCH PANEL*/
@media all and (max-width: 1024px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {

}

@media all and (max-width: 960px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 960px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 960px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 960px), only screen and (min-device-pixel-ratio: 2) and (max-width: 960px), only screen and (min-resolution: 192dpi) and (max-width: 960px), only screen and (min-resolution: 2dppx) and (max-width: 960px) {
  #banner_3boxes .col-1-3 .col-1-1.banner_box_container i{
    position: absolute;
    top: 5px;
    left: 15px;
    font-size: 26px;
  }
  #banner_3boxes .col-1-3 .col-1-1.banner_box_container .banner_box_text h4,
  #banner_3boxes .col-1-3 .col-1-1.banner_box_container .banner_box_text p{
    font-size: 1.1em;
  }

}
/*IPAD MINI => 768x1024 px*/ 
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 768px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 768px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 768px), only screen and (min-device-pixel-ratio: 2) and (max-width: 768px), only screen and (min-resolution: 192dpi) and (max-width: 768px), only screen and (min-resolution: 2dppx) and (max-width: 768px) {

}

@media all and (max-width: 767px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 767px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 767px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 767px), only screen and (min-device-pixel-ratio: 2) and (max-width: 767px), only screen and (min-resolution: 192dpi) and (max-width: 767px), only screen and (min-resolution: 2dppx) and (max-width: 767px) {
  #banner_3boxes {padding: 5px;}
  #banner_3boxes .col-1-3 .col-1-1.banner_box_container i {
    font-size: 30px;
    position: relative;
    text-align: center;
    left: 0px;
    top: 0px; 
  } 
  #banner_3boxes .col-1-3 .col-1-1.banner_box_container .banner_box_text h4 {display: none;}
}
@media all and (max-width: 640px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 640px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 640px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 640px), only screen and (min-device-pixel-ratio: 2) and (max-width: 640px), only screen and (min-resolution: 192dpi) and (max-width: 640px), only screen and (min-resolution: 2dppx) and (max-width: 640px) {
  #banner_3boxes .col-1-3{
    padding: 0px 10px;
  }  
  #banner_3boxes .col-1-3 .col-1-1.banner_box_container{
    padding: 5px 10px;
  }
  #banner_3boxes .col-1-3 .col-1-1.banner_box_container i {
    font-size: 20px;
    position: relative;
    text-align: center;
    left: 0px;
    top: 0px; 
  } 

}
@media all and (max-width: 480px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 480px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 480px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 480px), only screen and (min-device-pixel-ratio: 2) and (max-width: 480px), only screen and (min-resolution: 192dpi) and (max-width: 480px), only screen and (min-resolution: 2dppx) and (max-width: 480px) {

}
@media all and (max-width: 320px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 320px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 320px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 320px), only screen and (min-device-pixel-ratio: 2) and (max-width: 320px), only screen and (min-resolution: 192dpi) and (max-width: 320px), only screen and (min-resolution: 2dppx) and (max-width: 320px) {
 
}
